import echarts from 'echarts';

interface IConfig {
  dataX: Array<string>;
  nameX: string;
  nameY: string;
  nameXAfter?: string;
  dataY: Array<any>;
  dataYAfter?: Array<any>;
  ref: any;
  barWidth?: number;
  title?: string;
  color?: string;
  colorAfter?: string;
  gap?: Array<number>;
  legend?: Array<string>;
}

export function SingleBar(config: IConfig) {
  if (config.ref) {
    let myChart = echarts.init(config.ref);
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        }
      },
      title: {
        text: config.title,
        fontSize: 18,
        fontWeight: 500,
        color: "#444"
      },
      legend: {
        data: config.legend || ' ',
        left: 'right'
      },
      grid: {
        left: '3%',
        right: '18%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        name: config.nameX || '位置',
        type: 'category',
        position: "bottom",
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#82889B',
            fontSize: 12
          }
        },
        axisTick: {
          show: false,
          inside: true
        },
        axisLabel: {
          interval: 0
        },
        data: config.dataX
      },
      yAxis: {
        name: config.nameY,
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#82889B',
            fontSize: 12
          }
        },
        axisTick: {
          inside: true
        },
        boundaryGap: config.gap || [0, 20]
      },
      minInterval: 1,
      series: [{
        name: Array.isArray(config.legend) && config.legend.length > 0 ? config.legend[0] : config.nameX,
        type: 'bar',
        barWidth: config.barWidth || 15,
        barGap: '-100%',
        color: config.color || '#1585ff',
        data: config.dataY,
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        }
      }, {
        name: Array.isArray(config.legend) && config.legend.length > 1 ? config.legend[1] : config.nameXAfter,
        type: 'bar',
        barWidth: config.barWidth || 15,
        barGap: '0%',
        color: config.colorAfter || '#FFB53E',
        data: config.dataYAfter,
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        }
      }],
    };
    myChart.setOption(option)
  }
}
